<script setup>
  import { ref, onMounted } from 'vue'
  import taskApi from '@/apis/task.js'
  // 已完成列表
  const compList = ref([])
  // 下一页页码
  const nextPage = ref(1)
  // 每页包含数据条数
  const pageSize = ref(2)
  // 滚动
  const hasMore = ref(true)
  // 默认未触发下拉刷新
  const isTriggered = ref(false)
  // 搜索任务id
  const transportTaskId = ref('')
  const startTime = ref('')
  const endTiem = ref('')

  onMounted(() => {
    getCompList()
  })
  // 获取数据
  async function getCompList(status = 6, page = 1, pageSize = 5) {
    const { code, data, msg } = await taskApi.getList(
      status,
      page,
      pageSize,
      transportTaskId.value,
      startTime.value,
      endTiem.value
    )
    if (code !== 200) {
      return uni.utils.toast(msg)
    }
    // 页面为 1 时，清空数组
    if (page === 1) compList.value = []
    // 渲染任务列表
    compList.value = [...compList.value, ...(data.items || [])]
    // 计算下一页页码
    nextPage.value = ++data.page
  }
  //监听滚动
  function onScrollToLower() {
    if (!hasMore.value) return
    // 获取下一页数据
    getCompList(nextPage.value)
  }
  // 监听下拉刷新
  async function onScrollViewRefresh() {
    // 打开下拉动画
    isTriggered.value = true
    await getCompList()
    isTriggered.value = false
  }
  //开始时间
  function onStartchenge(e) {
    startTime.value = e.detail.value
    // uni.utils.toast(e.detail.value)
  }
  // 结束时间
  function onEndchenge(e) {
    endTiem.value = e.detail.value
    // uni.utils.toast(e.detail.value)
  }
  // 筛选按钮
  function onSerach() {
    getCompList()
  }
</script>

<template>
  <view class="task-search">
    <view class="search-bar">
      <text class="iconfont icon-search"></text>
      <input
        class="input"
        v-model="taskId"
        type="text"
        placeholder="输入任务编号"
      />
    </view>
    <view class="filter-bar">
      <picker class="picker" mode="date" @change="onStartchenge">{{
        startTime
      }}</picker>
      <text class="text">至</text>
      <picker class="picker" mode="date" @change="onEndchenge">{{
        endTiem
      }}</picker>
      <button class="button" @click="onSerach">筛选</button>
    </view>
  </view>
  <scroll-view
    @scrolltolower="onScrollToLower"
    @refresherrefresh="onScrollViewRefresh"
    :refresher-triggered="isTriggered"
    scroll-y
    refresher-enabled
    class="scroll-view"
  >
    <view class="scroll-view-wrapper">
      <view v-for="item in compList" :key="item.id" class="task-card">
        <navigator hover-class="none" url="/subpkg_task/detail/index?id=001">
          <view class="header">
            <text class="no">任务编号: {{ item.transportTaskId }}</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ item.startAddress }}</view>
              <view class="line">{{ item.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer flex">
          <view class="label">提货时间</view>
          <view class="time">{{ item.actualArrivalTime }}</view>
        </view>
      </view>
      <view v-if="compList.length <= 0" class="task-blank">无完成货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';

  .task-search {
    padding: 30rpx;
    // margin-top: -1rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;

    .search-bar {
      position: relative;

      .icon-search {
        position: absolute;
        top: 22rpx;
        left: 24rpx;
        color: $uni-secondary-color;
        font-size: $uni-font-size-small;
      }

      .input {
        height: 72rpx;
        background-color: #f4f4f4;
        border-radius: 72rpx;
        padding-left: 72rpx;
        font-size: $uni-font-size-small;
      }
    }

    .filter-bar {
      display: flex;
      margin-top: 30rpx;
      font-size: $uni-font-size-small;
      text-align: center;
      line-height: 64rpx;
      color: $uni-secondary-color;

      .picker {
        width: 230rpx;
        height: 64rpx;
        border-radius: 64rpx;
        background-color: $uni-bg-color;
      }

      .text {
        margin: 0 24rpx;
      }

      .button {
        width: 120rpx;
        height: 64rpx;
        padding: 0;
        margin-left: 40rpx;
        line-height: 64rpx;
        border-radius: 64rpx;
        font-size: $uni-font-size-small;
        color: #fff;
        background-color: $uni-primary;

        &[disabled] {
          background-color: #fadcd9;
        }
      }
    }
  }
</style>
